<template>
	<view>
		<u-navbar title="个人头像" :border-bottom="false"></u-navbar>
		<view style="width: 100%;padding: 30% 20rpx;text-align: center;color: #909399; position: relative">
			<avatar ref='avatar' selWidth="600upx" selHeight="600upx" @upload="myUpload" :quality="0.5"
      fileType="jpg"
			:avatarSrc="vuex_userInfo.avatar"
				avatarStyle="width:500upx; height: 500upx;">
			</avatar>
      
			<view>点击更新头像</view>
			<view v-if="loading" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: rgb(201 201 201); flex-direction: column;">
        <u-loading style="margin-bottom: 20rpx;"></u-loading>
        加载中...
      </view>
		</view>
	</view>
</template>

<script>
	import avatar from "@/components/yq-avatar/yq-avatar.vue";
  import {uploader} from '@/util/uploader.js'
	export default {
		components: {
			avatar,
		},
		data() {
			return {
        loading: false,
				background: {
					backgroundColor: '#000000',
				},
				useravatar:'',
			};
		},
		methods: {
			//上传返回图片
			async myUpload(rsp) {
        this.loading = true
        const imgSrc = await uploader({file_key: 'avatar.jpg', file_path: rsp.path})
        this.$u.vuex_userInfo({
          ...this.vuex_userInfo,
          avatar: imgSrc
        })
        this.loading = false
			},
			updateUserInfo:function(){
				let that=this;
				let param=this.vuex_userInfo;
				this.$u.api.imUser.updateUserInfo(param).then(res => {
					console.log("修改用户头像结果",res);
					if(res.code==200){
						/* if(res.data!=null&&res.data.avatar!=null&&res.data.avatar!=undefined&&res.data.avatar.length>0){
							let _url = that.$u.api.multipartAddress.getFileByPath + res.data.avatar;
							console.log("修改后的用户头像",_url);
							this.$u.vuex("vuex_userInfo.avatar",_url);
						} */
					}
				})
			}	
    }
	}
</script>

<style lang="scss">
	page {
		// background-color: #000000;
	}
</style>
